import React from 'react';
import { Tooltip as AntdTooltip } from 'antd';
import type { TooltipProps as AntdTooltipProps } from 'antd';
import { createStyles } from 'antd-style';

export interface TooltipProps extends Omit<AntdTooltipProps, 'className'> {
  /**
   * @description 自定义样式类名
   */
  customClassName?: string;
  /**
   * @description 组件类名
   */
  className?: string;
}

const useStyles = createStyles(({ token, css }) => ({
  tooltip: css`
    z-index: ${token.zIndexPopupBase};
  `,
}));

const TooltipComponent: React.FC<TooltipProps> = ({ customClassName, className, ...restProps }) => {
  const { styles, cx } = useStyles();
  
  const tooltipClassName = cx(
    className,
    customClassName,
    styles.tooltip
  );

  return <AntdTooltip overlayClassName={tooltipClassName} {...restProps} />;
};

const Tooltip = Object.assign(TooltipComponent, {
  _InternalPanelDoNotUseOrYouWillBeFired: (AntdTooltip as any)._InternalPanelDoNotUseOrYouWillBeFired,
});

export { Tooltip };
export default Tooltip;

